<template>
  <div class="app-detail">
    <el-card class="box-card">
      <div class="container-header">
        <div class="hign-line"></div>
        <div class="header-left">
          {{$t('inventoryManagement.baseInfo')}}
        </div>
      </div>
      <el-form :model="viewModel"
               ref="planForm"
               label-width="88px"
               :rules="rules">
        <el-row :gutter="24"
                class="mb8">
          <el-col :span="6"
                  :md="6"
                  :sm="6"
                  :xs="6">
            <el-form-item :label="$t('inventoryManagement.supplierName')"
                          prop="supplierName">
              <supplier-dialog v-model="viewModel.supplierName"
                               @callback="(row)=>supplierDataCallback(row)" />
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  :md="6"
                  :sm="6"
                  :xs="6">
            <el-form-item :label="$t('inventoryManagement.materialName')"
                          prop="materialName">
              <material-dialog v-model="viewModel.materialName"
                               @callback="(row)=>materialDataCallback(row)" />
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  :md="6"
                  :sm="6"
                  :xs="6">
            <el-form-item :label="$t('inventoryManagement.materialNo')"
                          prop="materialCode">
              <el-input v-model="viewModel.materialCode"
                        disabled
                        clearable
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  :md="6"
                  :sm="6"
                  :xs="6">
            <el-form-item :label="$t('specimen.sampleStage')"
                          prop="sampleStage">
              <el-select v-model="viewModel.sampleStage"
                         :placeholder="$t('public.selectPl')"
                         style="width:100%;"
                         clearable
                         size="small">
                <el-option v-for="(item) in sampleStageList"
                           :key="item.val"
                           :label="item.name"
                           :value="item.val" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  :md="6"
                  :sm="6"
                  :xs="6">
            <el-form-item :label="$t('specimen.sampleState')"
                          prop="sampleState">
              <el-select v-model="viewModel.sampleState"
                         :placeholder="$t('public.selectPl')"
                         style="width:100%;"
                         clearable
                         size="small">
                <el-option v-for="(item) in sampleStateList"
                           :key="item.val"
                           :label="item.name"
                           :value="item.val" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  :md="6"
                  :sm="6"
                  :xs="6">
            <el-form-item :label="$t('inspectionManagement.plantArea')"
                          prop="factoryName">
              <el-select filterable
                         v-model="viewModel.factoryName"
                         :placeholder="$t('public.select_holder',{select_holder: $t('inspectionManagement.plantArea')})"
                         style="width:100%;"
                         clearable
                         @change="factoryChange"
                         size="small">
                <el-option v-for="(item) in factoryList"
                           :key="item.id"
                           :label="item.factoryName"
                           :value="item.factoryName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  :md="6"
                  :sm="6"
                  :xs="6">
            <el-form-item :label="$t('inspectionManagement.revisionDrawing')"
                          prop="drawingVersion">
              <el-input v-model="viewModel.drawingVersion"
                        :placeholder="$t('public.placeholder', {placeholder: $t('inspectionManagement.revisionDrawing'),})"
                        clearable
                        type="text"
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  :md="6"
                  :sm="6"
                  :xs="6">
            <el-form-item :label="$t('specimen.sealingQuantity')"
                          prop="sealingQuantity">
              <el-input v-model="viewModel.sealingQuantity"
                        :placeholder="$t('public.placeholder', {placeholder: $t('specimen.sealingQuantity'),})"
                        clearable
                        type="number"
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  :md="6"
                  :sm="6"
                  :xs="6">
            <el-form-item :label="$t('specimen.createBy')"
                          prop="createBy">
              <el-input v-model="viewModel.createBy"
                        :placeholder="$t('public.placeholder', {placeholder: $t('specimen.createBy'),})"
                        clearable
                        disabled
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  :md="6"
                  :sm="6"
                  :xs="6">
            <el-form-item :label="$t('mtool.respName')"
                          prop="respName">
              <enjoy-select-user v-model="viewModel.respName"></enjoy-select-user>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  :md="6"
                  :sm="6"
                  :xs="6">
            <el-form-item :label="$t('specimen.sealingDate')"
                          prop="sealingDate">
              <el-date-picker v-model="viewModel.sealingDate"
                              size="small"
                              style="width: 100%"
                              value-format="yyyy-MM-dd"
                              type="date"
                              autocomplete="off"
                              :placeholder="$t('public.select_holder',{select_holder: $t('specimen.sealingDate')})"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  :md="6"
                  :sm="6"
                  :xs="6">
            <el-form-item :label="$t('specimen.effectiveDate')"
                          prop="effectiveDate">
              <el-date-picker v-model="viewModel.effectiveDate"
                              size="small"
                              style="width: 100%"
                              value-format="yyyy-MM-dd"
                              type="date"
                              autocomplete="off"
                              @change="handelChangeTime"
                              :picker-options="pickerOptions"
                              :placeholder="$t('public.select_holder',{select_holder: $t('specimen.effectiveDate')})"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  :md="6"
                  :sm="6"
                  :xs="6">
            <el-form-item :label="$t('specimen.remDay')"
                          prop="remDay">
              <el-input v-model="viewModel.remDay"
                        placeholder="有效日期-当前日期"
                        clearable
                        disabled
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('public.remark')"
                          prop="mentRemark">
              <el-input v-model="viewModel.mentRemark"
                        placeholder="请输入备注"
                        clearable
                        type="textarea"
                        maxlength="1000"
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('mtool.fileAtt')"
                          prop="uploadAttachments"
                          style="width:100%">
              <file-upload v-model="viewModel.uploadAttachments"
                           :fileType="fileType"
                           :otherList="otherList"
                           :bizId="id"
                           @change="(fileList)=>fileChange(fileList)"></file-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="submit-footer">
      <el-button icon="el-icon-close"
                 size="small"
                 @click="closeTab"
                 class="drawer-close">{{$t('public.close')}}</el-button>
      <el-button type="primary"
                 @click="submitForm"
                 icon="el-icon-check"
                 size="small">{{$t('public.submit')}}</el-button>
    </div>
  </div>

</template>

<script>
import { listFactory } from '@/api/basic/factory'
import { changeSpecimen, getSampleById } from '@/api/specimenManagement/specimen'
import SupplierDialog from '@/views/components/SupplierDialog'
import MaterialDialog from '@/views/components/MaterialDialog'
import EnjoySelectUser from '@/components/EnjoySelectUser'
import { geFileByBiz } from '@/api/file/file'

export default {
  name: 'specimenDisplace',
  components: {
    SupplierDialog,
    MaterialDialog,
    EnjoySelectUser,
  },
  data () {
    return {
      id: "",
      otherList: [],
      sampleStageList: [
        { val: '1', name: "PPAP" }, { val: '2', name: "OTS" }, { val: '3', name: "TO" }
      ],
      sampleStateList: [
        { val: '1', name: "使用中" }, { val: '2', name: "过期" }, { val: '3', name: "报废"}
      ],
      fileType: ['doc', 'xls', 'ppt', 'png','docx','xlsx','jpg','pdf'],
      viewModel: {
        uploadAttachments: null,
        supplierName: null,
        supplierCode: null,
        materialName: null,
        materialCode: null,
        sampleStage: null,
        sampleState: null,
        sealingQuantity: null,
        createBy: this.$store.getters.name,
        creatorId: this.$store.getters.userId,
        respName: null,
        respId: null,
        sealingDate: null,
        effectiveDate: null,
      },
      // 遮罩层
      loading: false,
      factoryList: [],
      // 日期范围
      dateRange: [],
      // 表单校验
      rules: {
        materialName: [
          {
            required: true,
            message: this.$t('formValidation.materialNameCannotBeEmpty'),
            trigger: 'change',
          },
        ],
        supplierName: [
          {
            required: true,
            message: '供应商名称不能为空',
            trigger: 'change',
          },
        ],
        factoryName: [
          {
            required: true,
            message: this.$t('formValidation.factoryAreaCannotBeEmpty'),
            trigger: 'change',
          },
        ],
        respName: [
          {
            required: true,
            message: '责任人不能为空',
            trigger: 'change',
          },
        ],
        sampleStage: [
          {
            required: true,
            message: '样品阶段不能为空',
            trigger: 'change',
          },
        ],
        sampleState: [
          {
            required: true,
            message: '状态不能为空',
            trigger: 'change',
          },
        ],
        sealingQuantity: [
          {
            required: true,
            message: '封样数量不能为空',
            trigger: 'change',
          },
        ],
      },
      pickerOptions: {
        disabledDate (date) {
          // 如果没有后面的-8.64e7就是不可以选择今天的
          return date.getTime() < Date.now() - 8.64e7;
        }
      }
    }
  },
  created () {
    this.id = this.$route.query.id
    this.getFactoryList()
    this.getSampleById()
    this.geFileByBiz()
  },
  methods: {
    geFileByBiz () {
      geFileByBiz({ bizId: this.id }).then((res) => {
        let list = []
        res.data.forEach((io) => {
          if (io.bizType === 'UPLOAD_FILE_OTHERS') {
            list.push(io)
          }
        })
        this.otherList = list
        console.log('otherList=========', this.otherList)
      })
    },
    getSampleById () {
      getSampleById(this.id).then((res) => {
        this.viewModel = res.data
      })
    },
    handelChangeTime (val) {
      let remDay, diffDate, date_2 = new Date(new Date().setHours(0, 0, 0, 0))
      let myDate_1 = Date.parse(val)
      let myDate_2 = Date.parse(date_2)
      diffDate = Math.abs(myDate_1 - myDate_2)
      remDay = Math.floor(diffDate / (1000 * 3600 * 24))
      this.$set(this.viewModel, "remDay", remDay)
    },
    fileChange (fileList) {
      this.otherList = fileList
    },
    getFactoryList () {
      listFactory().then((res) => {
        this.factoryList = res.rows
      })
    },
    factoryChange (e) {
      let obj = this.factoryList.find((item) => {
        return item.factoryName === e
      })
      this.viewModel.factoryCode = obj.factoryCode
    },
    supplierDataCallback (row) {
      this.viewModel.supplierCode = row.supplierCode
      this.viewModel.supplierName = row.supplierName
    },
    materialDataCallback (row) {
      this.viewModel.materialCode = row.materialCode
      this.viewModel.materialName = row.materialName
      this.$set(this.viewModel, 'factoryName', row.factoryName)
      this.viewModel.factoryCode = row.factoryCode
    },
    closeTab () {
      this.$tab.closeOpenPage('/specimen')
    },
    /** 提交按钮 */
    submitForm: function () {
      if (this.loading) {
        return
      }
      let fileId = []
      this.otherList.forEach((io) => {
        fileId.push(io.id)
      })
      let submitData = {
        ...this.viewModel,
        sampleBizType: 'UPLOAD_FILE_OTHERS',
        fileId: fileId.join(','),
      }
      console.log(JSON.stringify(submitData))
      this.$refs.planForm.validate((valid) => {
        if (valid) {
           if (!!submitData.respName) {
            submitData.respId = submitData.respName.id
            submitData.respName = submitData.respName.name
          }
          this.loading = true
          changeSpecimen(submitData)
            .then((res) => {
              if (res.code == 200) {
                this.$modal.msgSuccess('新增成功!')
                this.$tab.closeOpenPage('/specimen')
              } else {
                this.$modal.msgError(res.msg)
              }
              this.loading = false
            })
            .catch((error) => {
              this.loading = false
            })
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep input[type="number"] {
  -moz-appearance: textfield !important;
}
::v-deep .el-card {
  padding-top: 20px;
  border: 0px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding-bottom: 20px;
}
::v-deep .el-aside {
  padding: 0;
  margin-bottom: 0;
}
.content-style {
  border: 0px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  background-color: white;
  margin-top: 10px;
}
::v-deep .el-button-group .selBtn {
  background: #fff;
  border: 1px solid #0b7be3;
  color: #0b7be3;
}
::v-deep .el-button-group .unselBtn {
  background: #fff;
  border: 1px solid #ededf2;
  color: #666666;
}
.header-left {
  float: left;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 40px;
  display: flex;
  justify-content: center;
}
.header-right {
  float: right;
}
.container-header {
  float: left;
  width: 100%;
  border-bottom: 1px solid #ededf2;
  padding-left: 12px;
}
.container-table {
  float: left;
  margin-top: 6px;
  width: 100%;
  overflow: auto;
}
.mb8 {
  float: left;
  margin-top: 6px;
  width: 100%;
}
.drawer-footer {
  display: flex;
  position: relative;
  z-index: 9999;
  bottom: -40px;
  height: 40px;
  justify-content: center;
  width: 100%;
}
.hign-line {
  position: relative;
  left: -8px;
  top: 14px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid #0b7be3;
  float: left;
}
.drawer-close {
  background: #f7f8fa;
  border-color: #f7f8fa;
}
.submit-footer {
  height: 52px;
  background: #ffffff;
  box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.08);
  border-radius: 4px 4px 0px 0px;
  position: fixed;
  z-index: 9;
  bottom: 0px;
  width: 100%;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.samplingPercent {
  position: absolute;
  z-index: 9;
  right: 20px;
}
::v-deep .el-card {
  padding-top: 0px;
}
.app-detail {
  max-height: calc(100vh - 180px);
  overflow: auto;
}
</style>
